<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">楼宇名称：</div>
      <el-input v-model="params.name" placeholder="请输入内容" class="search-main" />
      <el-button type="primary" @click="getList">查询</el-button>
    </div>

    <el-button class="btn" type="success" :round="true" @click="open">新增楼栋</el-button>

    <!-- 表格区域 -->
    <div class="table">
      <el-table
        :data="list"
        style="width: 100%"
      >
        <!-- type='index' 表示这一列是序号  type='selection' 表示这一列是多选 -->
        <el-table-column
          type="index"
          label="序号"
        />

        <!-- prop='字段名字符串'  将来自己会找到这一列的字段展示 -->
        <el-table-column
          label="楼宇名称"
          prop="name"
          width="180"
        />
        <el-table-column
          label="层数"
          prop="floors"
        />
        <el-table-column
          label="在管面积(m²)"
          prop="area"
          width="120"
        />
        <el-table-column
          prop="propertyFeePrice"
          label="物业费(元/m²)"
          width="120"
        />
        <!-- formatter属性配置的函数 决定页面中的展示 -->
        <el-table-column
          prop="status"
          label="状态"
          :formatter="fn"
        />
        <el-table-column
          label="操作"
        >
          <template #default="scope">
            <el-button
              size="mini"
              type="text"
              @click="edit(scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="text"
              @click="del(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="box">
        <!-- 分页器 -->
        <el-pagination
          :current-page="params.page"
          :page-sizes="[1,2,3,4,5,6,7,8,9,10]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

    </div>

    <!-- 这里准备一个看不见的dialog结构 -->
    <!-- close事件是在点击X号时/蒙层触发 -->
    <el-dialog :title="form.id ? '编辑楼宇' : '添加楼宇'" :visible="flag" @close="handleClose">
      <div style="display: flex;justify-content: center;">
        <el-form ref="form" :model="form" :rules="rules" style="width: 400px">
          <el-form-item label="楼宇名称" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item label="楼宇层数" prop="floors">
            <el-input v-model="form.floors" />
          </el-form-item>
          <el-form-item label="在管面积" prop="area">
            <el-input v-model="form.area" />
          </el-form-item>
          <el-form-item label="物业费" prop="propertyFeePrice">
            <el-input v-model="form.propertyFeePrice" />
          </el-form-item>
          <el-form-item>
            <el-button>取消</el-button>
            <el-button @click="confirm">确认</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getBuildingListAPI, addBuildingAPI, delBuildingAPI, editBuildingAPI } from '@/api/building'
export default {
  name: 'Building',

  data() {
    return {
      flag: false,

      total: 0,
      list: [],

      // 获取数据的条件
      params: {
        page: 1,
        pageSize: 10,
        name: ''
      },

      form: {
        name: '',
        floors: '',
        area: '',
        propertyFeePrice: ''
      },

      rules: {
        name: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        floors: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        propertyFeePrice: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },

  mounted() {
    // 页面加载好了之后执行 => 请求数据
    this.getList()
  },

  methods: {
    edit(row) {
      console.log(row)
      this.flag = true // 打开弹窗

      // 数据回显
      this.form.name = row.name
      this.form.floors = row.floors
      this.form.area = row.area
      this.form.propertyFeePrice = row.propertyFeePrice
      this.form.id = row.id // 将来编辑请求需要这个id 存一下!!!
    },
    del(id) {
      // 二次确认=>请求=>提示=>重新获取数据
      this.$confirm('你确定要删了我么?').then(() => {
        // 确定
        delBuildingAPI(id).then(() => {
          // 需要在本页最后一条数据时 回到上一页
          // 此时后端已经删了这个数据了 前端数据还没更新 还有刚刚这一条
          if (this.list.length === 1) this.params.page--

          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {
        // 取消
      })
    },
    confirm() {
      // 新增/编辑 => 都要做校验
      this.$refs.form.validate((ok) => {
        // ok => true
        if (ok) {
          if (this.form.id) {
            // 编辑
            console.log('编辑')
            editBuildingAPI(this.form).then(() => {
              // 编辑成功
              this.$message.success('编辑成功')
              this.getList()
              this.flag = false

              // 一定要记得清空数据 删除id字段
              this.form = {
                name: '',
                floors: '',
                area: '',
                propertyFeePrice: ''
              }
            })
          } else {
            // 新增
            // console.log('可以请求数据了')
            addBuildingAPI(this.form).then(() => {
            // 请求成功后执行
            // 提示
              this.$message.success('添加成功')
              // 重新获取数据
              this.getList()
              // 关闭dialog
              this.flag = false

              this.form = {
                name: '',
                floors: '',
                area: '',
                propertyFeePrice: ''
              }
            })
          }
        }
      })
    },
    handleClose() {
      console.log('有人点X号')
      this.flag = false

      this.form = {
        name: '',
        floors: '',
        area: '',
        propertyFeePrice: ''
      }
    },
    open() {
      this.flag = true
    },

    handleCurrentChange(page) {
      console.log('页码变了', page)
      this.params.page = page // 更新页码
      this.getList()
    },
    handleSizeChange(pageSize) {
      // console.log('每页条数变了', pageSize)
      this.params.pageSize = pageSize
      this.getList()
    },
    getList() {
      getBuildingListAPI(this.params).then((res) => {
        console.log(res)
        // 存数据 展示在页面
        this.list = res.data.rows
        this.total = res.data.total
      })
    },

    fn(row) {
      // console.log(row) // 当前行的数据
      return row.status === 0 ? '空置中' : '租赁中'
    }
  }
}
</script>

<style lang="scss" scoped>
.btn {
  margin: 20px;
}
.box {
  // 浮动
  float: right;

  // flex 弹性容器布局(快速实现子元素横向布局)
  // display: flex;
  // 默认是从左往右   从右往左
  // justify-content: flex-end;

  margin-top: 10px;
  margin-right: 20px;
}
.department-container{
  padding:10px;
}
.search-container{
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237,237,237,.9);;
  padding-bottom: 20px;
  .search-label{
    width:100px;
  }
  .search-main{
    width: 220px;
    margin-right: 10px;
  }
}
</style>
